<template>
  <Row class="vm-login vm-panel">
   <Col span="10" class="login-form">
     <div class="login-header">
       <img src="../assets/img/logo.png" height="80" alt="">
       <p><span>炮姐</span>欢迎你</p>
     </div>
     <div class="login-form">
        <Form ref="user" :model="user" :rules="ruleUser">
            <FormItem prop="username">
                <Input v-model="user.username" placeholder="用户名">
                    <Icon type="ios-person-outline" slot="prepend"></Icon>
                </Input>
            </FormItem>
            <FormItem prop="password">
                <Input v-model="user.password" type="password" placeholder="密码">
                    <Icon type="ios-locked-outline" slot="prepend"></Icon>
                </Input>
            </FormItem>
            <Button type="primary" @click="do_login('user')">Login</Button>
        </Form>
     </div>
     <div class="login-footer">
       <Checkbox v-model="remenber">Remenber</Checkbox>
       <span class="forget"><a href="#">忘记密码</a></span>
     </div>
   </Col>
   <Col span="14" class="login-ad">
     <span class="photo-author">Misaka Mikoto</span>
   </Col>
  </Row>
</template>
<script>
import Util from '../libs/util.js'
import Urls from '../components/vm-urls'
export default {
  name: 'VmLogin',
  mounted() {
    sessionStorage.clear('id_token')
    sessionStorage.clear('user_name')
    sessionStorage.clear('user_menu')
  },
  data() {
    return {
      user: {
        username: '',
        password: ''
      },
      ruleUser: {
        username: [{ required: true, message: '请填写用户名', trigger: 'blur' }],
        password: [
          { required: true, message: '请填写密码', trigger: 'blur' },
          { type: 'string', min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
        ]
      },
      remenber: false
    }
  },
  methods: {
    do_login(name) {
      let self = this
      self.$refs[name].validate(valid => {
        if (valid) {
          Util.ajax
            //dev success
            .request(Urls.login, self.user)
            //dev failure
            //.request(Urls.loginFailure)
            .then(function(response) {
              let data = response.data
              if (data && data.success) {
                self.$Message.success(data.msg)
                //把token和用户名存到sessionStorage中
                sessionStorage.setItem('id_token', data.token)
                sessionStorage.setItem('user_name', self.user.username)
                Util.ajax
                  .request(Urls.menu, {
                    user: self.user,
                    token: data.token
                  })
                  .then(function(response) {
                    data = response.data
                    if (data && data.success) {
                      //把菜单存到sessionStorage中
                      sessionStorage.setItem(
                        'user_menu',
                        JSON.stringify(data.menu)
                      )
                      self.$router.push({
                        name: '/index' //,
                        //params: { user: self.user.username}
                      }) //跳转
                    } else {
                      self.$Message.error('菜单获取失败，错误码:' + data.ecode)
                    }
                  })
                  .catch(function(error) {
                    self.$Message.error('菜单获取失败，请重新登录或者联系管理员')
                  })
              } else if (data && data.msg) {
                self.$Message.error(data.msg)
              } else {
                self.$Message.error('未知错误')
              }
            })
            .catch(function(error) {
              console.log(error)
            })
        } else {
          this.$Message.error('表单验证失败!')
        }
      })
    }
  }
}
</script>
